<template>
  <div class="WarehouseMapIcon" :class="{warn: wearHouse.guardStatus || false, active: isShowMenu}"
       :style="getPointStyle(wearHouse)" :id="wearHouse.indexCode" @click.stop="toggleMenu">
    <span>{{ wearHouse.name }}</span>
    <div class="panel" v-if="isShowMenu" :style="positionStyleStr">
      <div class="panel--item" >
        <div class="btn" @click.stop="showWarnPlayerPanel(wearHouse)">仓库视频</div>
      </div>
      <div class="panel--item">
        <div class="btn"  @click.stop="showWarnlist">告警信息</div>
      </div>
    </div>
  </div>
  <WarnListPanel :warninfolist="warninfolist" v-if="isShowWarnlist" @close="closeWarnPanel" @camera="chooseCamera"></WarnListPanel>
</template>

<script setup>
import WarnListPanel from "@/views/armyScreen/barracks/change/WarnListPanel.vue";
import {arsenalSnapService} from "@/api/armyScreenApiV2.js";
import $bus from "@/util/bus";
const props = defineProps({
  wearHouse:{
    type: Object,
    default () {
      return {}
    }
  }
})

const $emit = defineEmits("cameralist")

onMounted(() => {
  document.addEventListener("click", hideMenu)
  $bus.on('hideMenuPanel', hideMenu)
})

onBeforeUnmount(() => {
  document.removeEventListener("click", hideMenu)
  $bus.off('hideMenuPanel', hideMenu)
})

// 显示菜单
const isShowMenu = ref(false)
// 切换菜单menu
function toggleMenu () {
  $bus.emit('hideMenuPanel')
  isShowMenu.value = isShowMenu.value ? false : true
}

function hideMenu () {
  isShowMenu.value = false
}


const isShowWarnlist = ref(false)
const warninfolist = ref(null)
// 显示告警列表
function showWarnlist() {
  const {wearHouse} = props
  // console.log(wearHouse.indexCode)
  const paramObj = {
    "indexCode": wearHouse.indexCode
  }
  arsenalSnapService(paramObj).then(res => {
    const tempArr = res.data || []
    tempArr.forEach(item => {
      item.active = false
    })
    warninfolist.value = tempArr
    isShowWarnlist.value = true
  })
}
function closeWarnPanel() {
  isShowWarnlist.value = false
}

/* 计算点位的样式 */
function getPointStyle(wearHouse) {
  // return `left:${wearHouse.x}px;top:${wearHouse.y}px;`
  return `left:${wearHouse.x}%;top:${wearHouse.y}%;display:inline-block;`
}

// 显示播放器
function showWarnPlayerPanel(wareHouse) {
  $emit('cameralist', wareHouse)
}

// 显示播放器
function chooseCamera(info) {
  showWarnPlayerPanel(props.wearHouse)
}

// 计算弹窗的位置
let positionStyleStr = computed(() => {
    const wearHouse = props.wearHouse
    const indexCode = wearHouse.indexCode
    const targetDom = document.getElementById(indexCode)
    if (targetDom) {
      const offsetTop = targetDom.offsetTop
      const transformArr = []
      let resultStr = ''
      console.log(`${targetDom.offsetLeft}px;${targetDom.offsetTop}px;`)
      if (offsetTop <= 512) { // 如果底部显示不下弹窗，则放在仓库上面显示
        resultStr = `position: absolute; left: 0px;`
      } else if ((663 - offsetTop) <= (116 + 30 + 2)) { // 如果底部显示不下弹窗，则放在仓库上面显示
        resultStr = `position: absolute; left: 0px; top:0px;`
        transformArr.push('translateY(-100%)')
      } else { // 如果仓库的位置 不大于 地图一半的高度，则要显示在下部
        resultStr = `position: absolute; left: 0px; top:0px;`
      }
      /* 解决 弹窗距离最左边太近了 */
      if (targetDom.offsetLeft < 135) {
        transformArr.push('translateX(0)')
        resultStr = resultStr + ``
      } else if ((886 - targetDom.offsetLeft) < 464) { /* 解决 弹窗距离最右边太近了 */
        transformArr.push('translateX(-100%)')
        resultStr = resultStr + `left:${886 - targetDom.offsetLeft}px;`
      } else if ((886 - targetDom.offsetLeft) < 287) {
        transformArr.push('translateX(-100%)')
        // resultStr = resultStr + 'transform: translateX(-80%);'
      }
      console.log(transformArr)
      const positionStyleStr = resultStr + `transform: ${transformArr.join(' ')}`
      console.log(positionStyleStr)
      return positionStyleStr
    }
    console.log('positionStyleStr.value', positionStyleStr.value)
  })



</script>

<style lang="scss" scoped>
.WarehouseMapIcon {
  position: absolute;
  left: 100px;
  top: 100px;
  //border: 1px solid green;
  width: 75px;
  height: 30px;
  background-image: url("@/assets/images/armyScreen/wearhouse-normal.png");
  background-size: cover;
  display:none;
  cursor: pointer;

  &.active{
    z-index: 99;
  }

  &.warn{
    background-image: url("@/assets/images/armyScreen/wearhouse-warn.png");
  }

  span {
    position: absolute;
    left: 32px;
    top: 6px;
    opacity: 0.9;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 0;
    font-weight: 400;
    white-space: nowrap;
  }

  .panel{
    position: absolute;
    top: 32px;
    left: -18px;
    width: 265px;
    height: 116px;
    line-height: 41px;
    background-image: url("@/assets/images/armyScreen/new/1.png");
    background-size: cover;
    transform: translateX(-37%);
    display: flex;
    cursor: default;

    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #CCF1FF;
    font-weight: 400;
    &--item{
      width: 50%;
      padding-left: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      &:nth-child(1){
        padding-left: 42px;
      }
      &:nth-child(2){
        padding-right: 42px;
      }
    }
    //&--item{
    //  width: 50%;
    //  padding-left: 36px;
    //}
    .btn{
      width: 74px;
      height: 24px;
      line-height: 24px;
      background-image: linear-gradient(270deg, rgba(17,85,152,0.58) 0%, rgb(0, 163, 250, 0.8) 100%);
      border-radius: 2px;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
